<template>
	<div class="page case">
			<view-box ref="viewBox" class='view-box'>
				<x-header class='header' slot="header" :left-options="{backText: '',preventGoBack:true}">
				<span slot="left" style="margin-left: 12px; color: #fff;" id="back">返回</span>	健康病历
				</x-header>
				<div class="top" style="height: 50px; width: 100%;"></div>
				<ul class="list" @click="toCaseEdit(item)" v-for="item in listArr">
					<li class="clearfix"><span class="date">{{item.treatment_time}}</span><i class="department">{{item.departmentCategory}}</i></li>
					<li>{{item.department}}</li>
					<li>{{item.treatmentResult}}</li>
				</ul>
				 <x-button class='addcase' @click.native='addcaseAction'>+添加病历</x-button>
			</view-box>
		
		<!-- 底部 tab 栏 -->
		<tabbar>
			<tabbar-item @on-item-click='toHealBase'>
				<img slot="icon" src="@/assets/image/heal.png">
				<span slot="label" class="nostate">健康档案</span>
			</tabbar-item>
			<tabbar-item @on-item-click='toDatamonitor' ref='selectedItem'>
				<img slot="icon" src="@/assets/image/index.png">
				<img slot="icon-active" src="@/assets/image/index_active.png">
				<span slot="label" class="nostate">数据监测</span>
			</tabbar-item>
			<tabbar-item @on-item-click='toCase' :selected="selected">
				<img slot="icon" src="@/assets/image/scheme.png">
				<img slot="icon-active" src="@/assets/image/scheme_active.png">
				<span slot="label" style="color: #3aaffc;">健康病历</span>
			</tabbar-item>
			<tabbar-item @on-item-click='toImprove'>
				<img slot="icon" src="@/assets/image/improve.png">
				<img slot="icon-active" src="@/assets/image/improve_active.png">
				<span slot="label" class="nostate">改善方案</span>
			</tabbar-item>
		</tabbar>
		<!-- 子页面 -->
		<transition>  <!--enter-active-class='slideInRight animated' leave-active-class='slideOutRight animated'-->
			<router-view>
			</router-view>
		</transition>
	</div>
</template>

<script>
	import Api from '@/api/index.js' //  引入api文件
	
	export default {
		data(){
			return {
				selected: true,
				customer_id: '',
				listArr: []
			}
		},
		created(){
			this.getData()
		},
		mounted(){
			//  与安卓交互， 点击返回app主页面
			document.getElementById('back').onclick = function() {
				android.showToast("000000");
			}
		},
		//  进入 /case/edit/id=1   进入子页面添加数据  返回 更新页面
		watch: {
          // 如果路由有变化，会再次执行该方法
          "$route": "getData"
        },
		methods: {
			//   数据列表
			getData(){
				this.customer_id = localStorage.getItem('customer_id')
				let param = new URLSearchParams()
				param.append('customer_id', this.customer_id)
				this.$http({
					method: 'post',
					url: Api.treatment_recordApi,
					data: param
				})
				.then(({data})=>{
//					console.log(data)
					if(data.data !== null){
						this.listArr = data.data;
					}
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			// 添加病历
			addcaseAction(){
				this.$router.push({
					path: '/case/addcase'
				})
			},
			//  去到结果页面
			toCaseEdit(item){
				console.log(item)
				this.$router.push({
					path: '/case/edit/id=' + item.id,
					query:{data:item}
				})
			},
			// 去到健康档案
			toHealBase(){
				this.$router.replace({
					path: '/healthbase'
				})
			},
			// 去到 数据监测
			toDatamonitor(){
				this.$router.replace({
					path: '/datamonitor'
				})
			},
			// 健康病历
			toCase(){
				this.$router.replace({
					path: '/case'
				})
			},
			// 去到 改善方案
			toImprove(){
				this.$router.replace({
					path: '/improve'
				})
			}
		}
	}
</script>

<style lang="less">
	.addcase{
		background: rgb(58,175,252) !important;
		width: 50% !important;
		color: #fff !important;
		margin-top: 50px !important;
	}
	@colorblue: rgb(58, 175, 252);
	@colorfff: #fff;
	.case {
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		bottom: 0px !important;
		.view-box {
			padding: 10px;
			.list:last-child{
			}
			.list {
				width: 100%;
				border: 1px solid rgb(238,238,238);
				border-radius: 6px;
				overflow: hidden;
				margin-bottom: 10px;
				li {
					width: 100%;
					display: block;
					.date,
					.department {
						width: 100px;
						height: 30px;
						text-align: center;
						line-height: 30px;
						background-color: @colorblue;
						color: @colorfff;
					}
					.date {
						float: left;
						border-bottom-left-radius: 6px;
						font-size: 16px;
					}
					.department {
						float: right;
						width: 60px;
						border-bottom-right-radius: 6px;
						font-size: 16px;
					}
				}
				li:nth-child(2),li:nth-child(3){
					color: rgb(102,102,102);
					padding-left: 18px;
				}
				li:nth-child(2){
					font-size: 18px;
					position: relative;
				}
				li:nth-child(2):after {
					content: '';
					display: block;
					width: 95%;
					height: 1px;
					border-bottom: 1px solid rgb(220,220,220);
				}
				li:nth-child(3){
					font-size: 14px;
					padding-top: 4px;
					padding-bottom: 4px;
				}
			}
		}
	}
</style>